import React, { useState } from 'react';
import './choose.less';
import ChooseItem from './chooseItem';
import { useToast } from '@/utils/toast';
import { margin } from '@mui/system';
export default function Choose({ data }: IProps) {
  let toast = useToast();
  // 是否显示参考答案
  const [answer, serAnswer] = useState(false);
  // 是否显示回答正确
  const [showAnswer, setShowAnswer] = useState(false);

  // 在父组件里面使用一个数组储存 哪个  子项 勾选
  const [userAnswers, setUserAnswers] = useState<string[]>([]);
  // 点击子组件，控制父组件的 userAnswers
  const onCheck = (val: string) => {
    // 判断是单选还是多选
    if (data.questionType !== 'many') {
      setUserAnswers([val]);
    } else {
      // 是多选，但是数组里面已经存在对应的key，就需要删除
      if (userAnswers.includes(val)) {
        const idx = userAnswers.indexOf(val);
        userAnswers.splice(idx, 1);
        setUserAnswers([...userAnswers]);
      } else {
        // 点击哪个选项，就把对应的key push到数组上面
        setUserAnswers([...userAnswers, val]);
      }
    }
  };
  // data.optionContent 是一个json格式的字符串，我们转换为 答案的数组
  const answers = JSON.parse(data.optionContent) as ISelectOption[];
  let type = data.questionType;
  const TypeMap: ITypeMap = {
    one: '单选',
    check: '判断',
    many: '多选',
  };
  // 点击确定事件
  const btnClick = () => {
    // console.log(id);
    if (userAnswers.length === 0) {
      toast('warning', '请选择答案');
      return;
    }
    // 当用户点击提交，需要对答案正确与否进行判断
    // 注意点：因为有多选，所以一定要排序，然后再join
    // console.log(data.answer + '----' + userAnswers.sort().join(','));
    // console.log(data.answer === userAnswers.sort().join(','));
    // 给一个数据，代表正确与否
    if (data.answer === userAnswers.sort().join(',')) {
      toast('success', '答案正确');
      setShowAnswer(true);
      serAnswer(false);
    } else {
      toast('error', '答案错误');
      serAnswer(true);
      setShowAnswer(false);
    }
  };
  return (
    <div className="choose">
      <section className="title">
        <span>{TypeMap[type]}</span>
        <div className="tit">{data.title}</div>
      </section>
      <section className="option">
        {answers.map((item) => (
          <ChooseItem
            key={item.key}
            data={item}
            onCheck={onCheck}
            isCheck={userAnswers.includes(item.key)}
          />
        ))}
      </section>
      <section className="btn" onClick={btnClick}>
        确定
      </section>
      <section>
        <div style={{ display: answer ? 'block' : 'none', marginTop: '20px' }}>
          <p style={{ marginBottom: '10px' }}> 参考答案:</p>
          <p>{data.answer}</p>
        </div>
        <div
          style={{ display: showAnswer ? 'block' : 'none', marginTop: '20px' }}
        >
          回答正确
        </div>
      </section>
    </div>
  );
}
